<template>
  <div class="monitor-grid-content">  
    <el-row type="flex" class="monitor-breadcrumb" align="middle">
      <span class="title-1" @click="toMonitorList">经典监控</span>
      <i class="el-icon-arrow-right"/>
      <span class="title-2">全部电梯</span>
    </el-row>

    <monitor-grid-item
      v-for="(item, index) in showMonitorList" 
      :key="'monitor-list-item' + index"
      :monitorData="item" />
  
  </div>
</template>

<script>

import { MonitorGridItem } from './components'


export default {
  name: 'MonitorGrid',
  components:{
    MonitorGridItem
	},
  data() {
      
      return {
        monitorList:[],
        showMonitorList:[[{},{},{},{},{},{}], [{},{},{},{},{},{}],[{},{},{},{},{}]]
      };
    },
    methods: {
      toMonitorList: function() {
        console.log("toMonitorList")
        this.$router.push({ path:'/MonitorList'});
      },
      toShowMonitorList() {
        this.showMonitorList = []
        if (this.monitorList && this.monitorList.length > 0) {
          var length = this.monitorList.length
          for(var i = 0; i < length; i += 6) {
            this.showMonitorList.push(this.monitorList.slice(i, i + 6));
          }
        }
      },
    },
    mounted() {
    },
    watch: {
    }
}
</script>

<style lang="scss" scoped>
.monitor-grid-content {
  width: 100%;

  .monitor-breadcrumb {
    margin-bottom: 20px;
    .title-1 {
      font-size: 14px;
      color: white;
      font-weight: bold;
      cursor: pointer;
    }
    .title-2 {
      font-size: 14px;
      color: rgb(179, 174, 174);
    }
    .el-icon-arrow-right {
      color: white;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
}
</style>